<template>
	<view>
		<view class="login_box">
			<u-form :model="model" ref="uForm">
				<u-form-item label="账号" prop="name" label-width="120">
					<u-input v-model="model.name" border placeholder="请输入账号" clearable/>
				</u-form-item>
				<u-form-item label="密码" prop="password" label-width="120">
					<u-input v-model="model.password" border type="password" :passwordIcon="false" placeholder="请输入密码"/>
				</u-form-item>
				<u-form-item label="手机" prop="phone" label-width="120">
					<u-input v-model="model.phone" border placeholder="请输入密码"/>
				</u-form-item>
				<u-form-item label="验证码" prop="verificationCode" label-width="120">
					<u-input v-model="model.verificationCode" border placeholder="请输入验证码"/>
					<u-button type="error" size="medium" plain @click="getCode" :disabled="isClick">{{codeStr}}</u-button>
				</u-form-item>
				<u-button @click="login" type="error" size="medium">注册</u-button>
			</u-form>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			model: {
				name: '',
				password: '',
				phone: '',
				verificationCode: ''
			},
			codeStr: '获取验证码',
			code: '',
			verificationCode: '',
			isClick: false,
			rules: {
				name: [
					{
						required: true,
						message: '请输入账号',
						trigger: ['change','blur'],
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: ['change','blur'],
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change','blur'],
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}
				],
				verificationCode: [
					{
						required: true,
						message: '请输入验证码',
						trigger: ['blur'],
					}
				],
				
			}
		};
	},
	methods: {
		login() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					if (this.model.verificationCode != this.code) {
						this.$refs.uToast.show({
							title: '验证码不正确',
							type: 'error'
						})
					} else {
						this.$http.post('rest/users', this.model).then(res => {
							console.log(res.data)
						})
					}	
				} else {
					console.log('验证失败');
				}
			});
		},
		// 获取验证码
		getCode() {
			let num = 4
			let timer = setInterval(() => {
				num--
				this.codeStr = `${num}S`
				this.isClick = true
				if (num == -1) {
					this.$refs.uToast.show({
						title: `验证码: ${this.code}`
					})
					this.isClick = false
					this.codeStr = '获取验证码'
					clearInterval(timer)
				}
			},1000)
			
		}
	},
	onReady() {
		this.code = this.$u.random(1000, 9999)
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss">
page {
	// display: flex;
	// align-items: center;
	// flex-direction: column;
	
	.login_box {
		margin-top: 30%;
		width: 100%;
		padding: 0 5%;
		
		text-align: center;
		uni-navigator {
			margin-top: 40upx;
			font-size: 28upx;
			color: #FA3534;
		}
	}
}
</style>
